<template>
	<div style="position: relative;">

		<div class="one">

			<div class="header" @click="drawer_one = true">
				<span>职务列表 <i class="el-icon-circle-plus"></i></span>
			</div>

			<!-- 下拉弹框 -->
			<el-drawer  size="80%" title="添加职务" :visible.sync="drawer_one" :direction="direction">
				<el-input style="padding: 10px;" v-model="new_one" placeholder="请输入添加职务的名称"></el-input>
				<el-button type="primary" v-on:click='add_duty()'
					style="display: block; width: 80%; margin: 10px auto;">
					添加职务</el-button>
			</el-drawer>


			<div>

				<div class="item" v-for='duty in duty_list' v-on:click="ch_one(duty.id, duty.duty_name)"
					:class="[duty_id === duty.id?'active': '']" :id="duty.id">
					<span>{{duty.duty_name}} </span>
				</div>

			</div>

			<div style="height: 120px;"></div>

		</div>

		<div class="two">

			<div class="header" @click="drawer_two = true">
				<span>人员列表 <i class="el-icon-circle-plus"></i></span>

			</div>

			<!-- 下拉弹框 -->
			<el-drawer size="80%" title="职务新增人员" :visible.sync="drawer_two" :direction="direction">
				<div style="margin-left: 20px; font-weight: 800;">职务名称:{{duty_name}}</div>

				<el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch"
					placeholder="请输入内容" @select="handleSelect"></el-autocomplete>

				<el-button type="primary" v-on:click='user_add_duty()'
					style="display: block; width: 80%; margin: 10px auto;">
					职务添加人员</el-button>
			</el-drawer>


			<div>
				<div class="item" v-for='user in duty_user_list' v-if='! user.drop_time'>
					<span>{{user.name}} </span>


					<i class="el-icon-remove" style="color: red;"
						v-on:click="user_lift_duty(user.id, user.duty_id)"></i>

				</div>
			</div>

			<div style="height: 120px;"></div>

		</div>
		
		<div style="position: fixed; bottom: 50px; width: 100%;">
			<PermissionSetting :dutyId='duty_id'></PermissionSetting>
			
		</div>
		


	</div>
</template>

<script>
	
	import PermissionSetting from './permission_setting.vue'
	import {
		add_duty_url,
		select_all_duty_url,
		select_user_by_duty_url,
		user_lift_duty_url,
		show_all_user_url,
		user_add_duty_url
	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {PermissionSetting},
		props: {},
		data() {
			return {
				duty_list: [],
				duty_select_list: [],
				duty_user_list: [],
				duty_id: '',
				duty_name: '',
				direction: 'ttb',
				drawer_one: false,
				drawer_two: false,
				new_one: '',


				duty_name: '',
				user_list: [],
				state1: '',
				user_id: '',
			}
		},
		methods: {

			add_duty() {

				if (this.new_one === '') {
					this.$message({
						message: '职务名为空' + '!!!',
						type: 'error'
					})

					return
				}


				this.$axios({
					method: 'POST',
					url: add_duty_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						duty: this.new_one,
					})
				}).then((response) => { //这里使用了ES6的语法
					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})
						return
					}

					this.$message({
						message: '职务添加成功',
						type: 'success'
					})

					this.select_all_duty()

				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})


			},

			select_all_duty() {

				this.$axios({
					method: 'GET',
					url: select_all_duty_url,
				}).then((response) => { //这里使用了ES6的语法

					this.duty_list = response.data.resultBody.reverse()
				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			ch_one(duty_id, duty_name) {

				this.duty_id = duty_id
				this.duty_name = duty_name

				this.select_user_by_duty(duty_id)

			},

			select_user_by_duty(duty_id) {

				this.$axios({
					method: 'GET',
					url: select_user_by_duty_url,
					params: {
						duty_id: duty_id
					}
				}).then((response) => { //这里使用了ES6的语法

					this.duty_user_list = response.data.resultBody.reverse()
					// console.log(this.duty_user_list)
				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},

			//职务解除函数
			user_lift_duty(user_id, duty_id) {

				this.$axios({
					method: 'POST',
					url: user_lift_duty_url,
					data: this.qs.stringify({
						duty_id: duty_id,
						user_id: user_id
					})
				}).then((response) => { //这里使用了ES6的语法

					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})

						return
					} else {

						this.$message({
							message: '职务解除成功',
							type: 'success'
						})

						this.select_user_by_duty(duty_id)
					}

					// this.duty_user_list = response.data.resultBody.reverse()
				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},

			get_all_user() {

				this.$axios({
					method: 'GET',
					url: show_all_user_url,
					params: {
						limit: 1000
					}
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					this.user_list = response.data.resultBody.reverse()
					for (var i = 0; i < this.user_list.length; i++) {
						let val = this.user_list[i]
						val['value'] = val['name']
					}
					// console.log(this.user_list)
					// console.log(this.user_list)
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},


			//人员下拉搜索选择功能
			querySearch(queryString, cb) {
				var user_list = this.user_list;
				var results = queryString ? user_list.filter(this.createFilter(queryString)) : user_list;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			
			createFilter(queryString) {
				return (user_list) => {
					return (user_list.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},

			handleSelect(item) {
				// console.log(item);
				
				this.user_id = item['id']
			},
		
			user_add_duty(){
				
				this.$axios({
					method: 'POST',
					url: user_add_duty_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						user_id: this.user_id,
						duty_id: this.duty_id
					})
				}).then((response) => { //这里使用了ES6的语法
				
					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})
					
						return
					} else {
					
						this.$message({
							message: '添加成功',
							type: 'success'
						})
					
						this.select_user_by_duty(this.duty_id)
					}
					
					
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
				
			},
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {
			this.select_all_duty()
			this.get_all_user()
		},
	}
</script>

<style scoped lang="less">
	.one,
	.two {
		width: 50%-0.5px;
		display: inline-block;
	}

	.one {
		// border-right: 0.5px solid black;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.two {
		// border-left: 0.5px solid black;
		position: absolute;
		right: 0px;
		top: 0px;
	}


	.header {
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 20px;
		background-color: floralwhite;
	}

	.item {
		position: relative;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		// background-color: #F0F0F0;
		border-bottom: 0.5px solid #F0F0F0;

		span {
			padding-left: 10px;
		}

		i {
			position: absolute;
			display: block;
			right: 15px;
			top: 10px;
			color: orangered;
		}

	}

	.active {
		background-color: orange;
		color: white;
	}
</style>
